<template>
  <!-- 最外层容器，用于居中与间距控制 -->
  <div class="form-container">
    <!-- 标题输入 -->
    <div class="form-item">
      <label class="required">*标题：</label>
      <input
        v-model="title"
        class="input"
        placeholder="请输入标题"
      >
    </div>

    <!-- 内容输入（多行文本） -->
    <div class="form-item">
      <label class="required">*内容：</label>
      <textarea
        v-model="content"
        class="textarea"
        placeholder="请输入内容"
        rows="6"
      ></textarea>
    </div>

    <!-- 接收人输入 -->
    <div class="form-item">
      <label class="required">*接收人：</label>
      <input
        v-model="receiver"
        class="input"
        placeholder="请输入用户名"
      >
    </div>

    <!-- 按钮区域 -->
    <div class="button-group">
      <button class="btn send-btn" @click="handleSend">发送</button>
      <button class="btn reset-btn" @click="handleReset">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const title = ref('')
const content = ref('')
const receiver = ref('')

// 发送逻辑（可扩展接口请求）
const handleSend = () => {
  // 简单打印演示，实际可替换为接口请求
  console.log('发送数据：', { title: title.value, content: content.value, receiver: receiver.value })
  // 可扩展：if 校验通过 → 调用 axios/post 接口
}

// 重置逻辑
const handleReset = () => {
  title.value = ''
  content.value = ''
  receiver.value = ''
}
</script>

<style scoped>
/* 容器样式：水平居中、限制宽度 */
.form-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 表单项统一间距 */
.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* 标签样式（含必填星号） */
.required::after {
  content: '*';
  color: red;
  margin-right: 4px;
}
label {
  width: 60px;
  text-align: right;
  margin-right: 12px;
  line-height: 32px;
}

/* 输入框基础样式 */
.input, .textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.textarea {
  resize: none; /* 禁止拉伸 */
}

/* 按钮组布局 */
.button-group {
  margin-left: 72px; /* 与标签对齐 */
  display: flex;
  gap: 12px;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.send-btn {
  background-color: #409eff;
}
.reset-btn {
  background-color: #909399;
}

/*  hover 交互 */
.send-btn:hover {
  background-color: #66b1ff;
}
.reset-btn:hover {
  background-color: #a6a9ad;
}
</style>
